<template>
  <Tabs>
    <TabPane label="登录信息">
      <Form ref="userInfo" :model="userInfo" :label-width="80" :rules="ruleInline">
        <FormItem label="用户名称" prop="username">
          <Input v-model="userInfo.username" placeholder="用户登录名称"></Input>
        </FormItem>
        <FormItem label="Email">
          <Input v-model="userInfo.email" placeholder="Email，用于接收系统消息"></Input>
        </FormItem>
        <FormItem label="手机号码">
          <Input v-model="userInfo.mobile" placeholder="手机号码，用于接收验证短信"></Input>
        </FormItem>
        <FormItem label="登录密码">
          <Input v-model="userInfo.password" placeholder="登录密码，不修改请留空"></Input>
        </FormItem>
        <FormItem label="逻辑删除">
          <Select v-model="userInfo.deleted_flag" style="width:200px">
            <Option v-for="item in [{value:1,label:'是'},{value:0,label:'否'}]" :value="item.value" :key="item.value">{{
              item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="post('userInfo',userInfo)">保存</Button>
        </FormItem>
      </Form>
    </TabPane>

    <TabPane label="扩展信息">
      <Form ref="memberInfo" :model="memberInfo" :label-width="100" :rules="ruleInlineMemberInfo">
        <FormItem label="邀请码" prop="invitation_code">
          <Input v-model="memberInfo.invitation_code" :disabled="true"></Input>
        </FormItem>

        <FormItem label="腾讯QQ">
          <Input v-model="memberInfo.qq"></Input>
        </FormItem>

        <FormItem label="Github账号">
          <Input v-model="memberInfo.github"></Input>
        </FormItem>

        <FormItem label="知乎账号">
          <Input v-model="memberInfo.zhihu"></Input>
        </FormItem>

        <FormItem label="微博账号">
          <Input v-model="memberInfo.weibo"></Input>
        </FormItem>


        <FormItem>
          <Button type="primary" @click="post('memberInfo',memberInfo)">保存</Button>
        </FormItem>
      </Form>
    </TabPane>
  </Tabs>
</template>
<script>
  import {user} from "@/api";
  import {Button, Form, FormItem, Input, InputNumber, Option, Radio, RadioGroup, Select, TabPane, Tabs} from 'iview';

  export default {
    components: {
      InputNumber,
      Button,
      Form,
      FormItem,
      Input,
      Tabs,
      TabPane,
      RadioGroup,
      Radio,
      Select,
      Option
    },
    data() {
      return {
        userInfo: {
          id: "",
          username: "",
          email: "",
          mobile: ""
        },
        ruleInline: {
          username: [{required: true, message: "用户名称必须填写", trigger: "blur"}],
          email: [{required: true, message: "Email必须填写", trigger: "blur"}],
          mobile: [{required: true, message: "手机号码必须填写", trigger: "blur"}]
        },
        ruleInlineMemberInfo: {
          qq: [{required: true, message: "QQ必须填写", trigger: "blur"}],
          // email: [{required: true, message: "Email必须填写", trigger: "blur"}],
          // mobile: [{required: true, message: "手机号码必须填写", trigger: "blur"}]
        },
        memberInfo: {
          uid: '',
          invitation_code: '',
          qq: '',
          weibo: '',
          zhihu: '',
          github: ''
        },
      };
    },
    methods: {
      // get() {
      //   user.getInfo(this.$store.state.admin.user.name).then(res => {
      //
      //     console.log(JSON.stringify(res.data))
      //     this.formItem = res.data;
      //   });
      // },
      async get() {
        await user.getInfoByName(this.$store.getters['user/username']).then(res => {
          // console.log(this.userInfo);
          this.userInfo = res.data;
        });

        user.getMemberInfo(this.userInfo.id).then(res => {
          this.memberInfo = res.data;
        });
      },
      post(type, data) {
        if(type === 'userInfo') {
          this.$refs["userInfo"].validate(valid => {
            if(valid) {
              if(this.userInfo.id) {
                //更新数据
                user.update(this.userInfo.id, this.userInfo).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/ucenter/user/list");
                  }
                });
              } else {
                //新增数据
                user.create(this.userInfo).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/ucenter/user/list");
                  }
                });
              }
            } else {
              this.$Message.error("请填写必要信息");
            }
          });
        } else if(type === "memberInfo") {

          this.$refs["memberInfo"].validate(valid => {

            console.log(this.memberInfo);

            if(valid) {
              if(this.memberInfo.uid) {

                //更新数据
                user.updateMemberInfo(this.memberInfo.uid, this.memberInfo).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/ucenter/user/list");
                  }
                });
              }
            } else {
              this.$Message.error("请填写必要信息");
            }
          });
        }
      },
      // post() {
      //   user.update(this.$store.state.admin.user.name, this.formItem).then(res => {
      //
      //   });
      // }
    },
    mounted() {
      this.get();
    }
  };
</script>
